import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'logistics_detail_logic.dart';
import '../../../gen/assets.gen.dart';

/// 物流详情页面
class LogisticsDetailView extends GetView<LogisticsDetailLogic> {
  const LogisticsDetailView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // 背景图
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Assets.points.detailBg.image(
              fit: BoxFit.cover,
              height: 300.h,
            ),
          ),
          SafeArea(
            child: Column(
              children: [
                _buildAppBar(),
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        SizedBox(height: 20.h),
                        _buildProductInfo(),
                        SizedBox(height: 20.h),
                        _buildTrackingNumber(),
                        SizedBox(height: 20.h),
                        _buildLogisticsTimeline(),
                        SizedBox(height: 40.h),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 顶部导航栏
  Widget _buildAppBar() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
      child: Row(
        children: [
          GestureDetector(
            onTap: () => Get.back(),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 20.sp,
            ),
          ),
          Expanded(
            child: Text(
              '物流详情',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(width: 20.w),
        ],
      ),
    );
  }

  /// 产品信息
  Widget _buildProductInfo() {
    return Obx(() {
      final product = controller.state.productInfo;
      if (product.isEmpty) return const SizedBox.shrink();
      
      return Container(
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: const Color(0xFF2A2A2A),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Row(
          children: [
            // 产品图片
            Container(
              width: 60.w,
              height: 60.w,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(8.r),
              ),
              child: product['image'] != null
                  ? Image.network(
                      product['image'],
                      fit: BoxFit.cover,
                    )
                  : Center(
                      child: Icon(
                        Icons.image,
                        size: 24.sp,
                        color: Colors.grey[500],
                      ),
                    ),
            ),
            SizedBox(width: 12.w),
            // 产品名称和数量
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    product['productName'] ?? '产品名XXXX',
                    style: TextStyle(
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w500,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    'X${product['quantity'] ?? 1}',
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: const Color(0xFFF67F41),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      );
    });
  }

  /// 物流单号
  Widget _buildTrackingNumber() {
    return GestureDetector(
      onTap: () => Get.toNamed('/shipping-address'),
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 20.w),
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: const Color(0xFF2A2A2A),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Row(
          children: [
            Container(
              width: 40.w,
              height: 40.w,
              decoration: const BoxDecoration(
                color: Color(0xFF3A3A3A),
                shape: BoxShape.circle,
              ),
              child: Icon(
                Icons.local_shipping_outlined,
                color: Colors.white,
                size: 20.sp,
              ),
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: Obx(() => Text(
                    '申通 ${controller.state.trackingNumber.value}',
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.white,
                    ),
                  )),
            ),
            Icon(
              Icons.arrow_forward_ios,
              color: Colors.grey[500],
              size: 16.sp,
            ),
          ],
        ),
      ),
    );
  }

  /// 物流时间轴
  Widget _buildLogisticsTimeline() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        color: const Color(0xFF2A2A2A),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Obx(() => Column(
            children: controller.state.logisticsRecords.asMap().entries.map((entry) {
              final index = entry.key;
              final record = entry.value;
              final isLast = index == controller.state.logisticsRecords.length - 1;
              return _buildTimelineItem(record, isLast);
            }).toList(),
          )),
    );
  }

  /// 时间轴项
  Widget _buildTimelineItem(Map<String, dynamic> record, bool isLast) {
    final isCompleted = record['isCompleted'] as bool;
    
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 时间轴线和圆点
        Column(
          children: [
            Container(
              width: 12.w,
              height: 12.w,
              decoration: BoxDecoration(
                color: isCompleted ? const Color(0xFFF67F41) : const Color(0xFF4A4A4A),
                shape: BoxShape.circle,
              ),
            ),
            if (!isLast)
              Container(
                width: 2.w,
                height: 60.h,
                color: const Color(0xFFF67F41),
              ),
          ],
        ),
        SizedBox(width: 16.w),
        // 状态和描述
        Expanded(
          child: Padding(
            padding: EdgeInsets.only(bottom: isLast ? 0 : 20.h),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  record['status'],
                  style: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w600,
                    color: Colors.white,
                  ),
                ),
                SizedBox(height: 4.h),
                Text(
                  record['description'],
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey[500],
                    height: 1.5,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
